<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>Full Lesson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS feed" href="/rss" />
<link type="text/css" rel="stylesheet" href="themes/default/css/style.css" media="screen, projection" />
<link type="text/css" rel="stylesheet" href="themes/default/css/print.css" media="print" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="themes/default/js/footerFixed.js"></script>
<script language="JavaScript">


$('document').ready(function(){
	$('.over').hover(
		function(){
			var src = $(this).attr('src');
			var src_o = src.substr(0, src.lastIndexOf('.')) + '_o' +
			src.substring(src.lastIndexOf('.'));
			$(this).attr('src',src_o);
		},
		function(){
			var src = $(this).attr('src');
			var src = src.substr(0, src.lastIndexOf('.')-2) +
			src.substring(src.lastIndexOf('.'));
			$(this).attr('src',src);
		}
	)
	$("#menu li").hover(function(){
		$("ul",this).show();
	},
	function(){
		$("ul",this).hide();
 	});


/*$('.toggle').toggles({click:false});
***/

// make thomas ----------------------------------------------------------
	// define the namespace object as we only want to have one global variable
	// We need to do a check before we create the namespace
	// here we use a shorter version
    var sinoApp = sinoApp || {};
    
    //need to use prefix strictly to define the scope of js code for each tab
    //dia_ = dialogue, voc_ = vocabulary, gra_ = grammar, exe_ = exercises, exp_ = expansion
    
    // BELOW CODE FOR DIALOGUE TAB 
    // playlist
    sinoApp.dia_current = 0;
    sinoApp.dia_init = function() {
       audio1 = $('#dia_audio_1');  
       playlist = $('#dia_playlist');
       tracks = playlist.find('li a	');
       len = tracks.length;
       player = audio1[0];  
       player.volume = .10; 

       // control playlist play/pause
       playlist.find('#dia_play').click(function (e) {   
          if(player.paused) {
             player.play();
    	     sinoApp.dia_playController("Pause");
    	  }else {
    	     player.pause();
    	     sinoApp.dia_playController("Play");
    	  }
       });

       // control playlist stop
       playlist.find('#dia_stop').click(function (e) {
    	   sinoApp.dia_current = 0;
    	   link = playlist.find('a')[0];
    	   sinoApp.dia_run($(link),player,0);
    	   sinoApp.dia_playController("Play");
       });
       
       player.addEventListener('ended', function (e) {    
          if(sinoApp.dia_current>1000){ 
             sinoApp.dia_current = 0; 
             sinoApp.dia_run($(link),player,0);
          }   
          if(sinoApp.dia_current==1000){ 
             link = playlist.find('a')[0];
             sinoApp.dia_run($(link),player,0);
             sinoApp.dia_playController("Play");          
          }   
    	  sinoApp.dia_current++;
    	  if(sinoApp.dia_current == len){
    		 sinoApp.dia_current = 0;
    	     link = playlist.find('a')[0];
    	     sinoApp.dia_playController("Play");	     
    	  }
 	      else{
    	     link = playlist.find('a')[sinoApp.dia_current];    
    	  }   
    	  //alert(sinoApp.dia_current);   
    	  if(sinoApp.dia_current!=1001){ 	  
    	     sinoApp.dia_run($(link),player,sinoApp.dia_current);    
    	  }    
       });
    };

    sinoApp.dia_run = function(link, player, play) {
       player.src = link.attr('href');
       par = link.parent();
       par.addClass('active').siblings().removeClass('active');  
       player.load();
       if(play!=0){
          player.play();
       }
    };

    // control playlist play/pause based on event
    sinoApp.dia_playController = function (status) {
       if(status=="Play"){
          playlist.find('#dia_play').text("再生 >");
       }else{
    	  playlist.find('#dia_play').text("一時停止 ||");
       }
    }

    // play single sentence
    sinoApp.dia_runSentence = function() {
    	audio1 = $('#dia_audio_1');     
        playlist = $('#dia_playlist');  
        player1 = audio1[0];     
        playlist.find('a').click(function (e) {
           e.preventDefault();   
           sinoApp.dia_playController("Pause");
           sinoApp.dia_current = 1000;
           link1 = playlist.find('a')[0];   
           sinoApp.dia_run($(link1),player1,0);
           link = $(this);    
           sinoApp.dia_run($(link),player1,1);          
        });
    };

    
    // display pinyin on dialogue
    sinoApp.dia_pinyin = function() {
       
       $('#dia_pinyin').click(function (e) {
    	  var $el = $(this);
    	  $el.text($el.text() == "ピンインON" ? "ピンインOFF": "ピンインON");
          if ( $('.dia_pinyin').css('visibility') == 'hidden' )
    $('.dia_pinyin').css('visibility','visible');
  else
    $('.dia_pinyin').css('visibility','hidden');
           
       });
       
    };
   
    // display translation on dialogue
    sinoApp.dia_trans = function() {
       $('#dia_trans').click(function (e) {
      	  var $el = $(this);
      	  $el.text($el.text() == "日本語訳ON" ? "日本語訳OFF": "日本語訳ON");
           // $('.dia_trans').toggle();
          if ( $('.dia_trans').css('visibility') == 'hidden' )
    $('.dia_trans').css('visibility','visible');
  else
    $('.dia_trans').css('visibility','hidden');  
       });
    };
   

    // initialise dia_playlist
    sinoApp.dia_init();
    // initialise dia_ per sentence
    sinoApp.dia_runSentence();

    sinoApp.dia_pinyin();

    sinoApp.dia_trans();

});

// -->
</script>

</head>
<body>
<div id="header">
	<div id="header01">
		<span class="header04"><img src="themes/default/img/logo_panda.png" alt="logo"></span>
		  <ul>
		    <li><a href=""><img src="themes/default/img/icn_home.png" />ホーム</a></li> 
		    <li><a href=""><img src="themes/default/img/icn_course.png" />コース</a></li> 
		    <li><a href=""><img src="themes/default/img/icn_price.png" />お申込み</a></li> 
		    <li><a href=""><img src="themes/default/img/icn_help.png" />ヘルプ</a></li>
		  </ul>

	<div id="header02">
		<span class="header02">buchou3</span>
		<span class="header03"><a href="">アカウント<img src="themes/default/img/icn_account.png" /></a></span>
		</div>
	</div>
</div><!--End header-->

<div id="contents">
	<div id="main">
    <div class="main01">
      <table width="690" border="1" cellspacing="2" cellpadding="2" class="main01_2">
        <tr>
          <td><a href="">1</a></td>
          <td><a href="">2</a></td>
          <td><a href="">3</a></td>
          <td><a href="">4</a></td>
          <td><a href="">5</a></td>
          <td><a href="">6</a></td>
          <td><a href="">7</a></td>
          <td><a href="">8</a></td>
          <td><a href="">9</a></td>
          <td><a href="">10</a></td>
          <td><a href="">11</a></td>
          <td><a href="">12</a></td>
          <td><a href="">13</a></td>
          <td><a href="">14</a></td>
          <td><a href="">15</a></td>
          <td><a href="">16</a></td>
          <td><a href="">17</a></td>
          <td><a href="">18</a></td>
          <td><a href="">19</a></td>
          <td><a href="">20</a></td>
        </tr>
      </table><br />
		</div><!--End main01-->

		<div class="main02">
			<span class="main02_1"><a href="">ホーム</a>　<img src="themes/default/img/icn_arrow.gif" />　<a href="">入門 </a>　<img src="themes/default/img/icn_arrow.gif" />　<a href="">レッスン1</a>　<img src="themes/default/img/icn_arrow.gif" />　第2課「初めまして」</span>
			<span class="main02_2"><a href=""><img src="themes/default/img/Lesson_Prev.jpg" class="over" /></a><a href=""><img src="themes/default/img/Lesson_Next.jpg" class="over" /></a></span>
		</div>

		<div class="tabs">
			<ul>
				<li style="z-index:9;"><a href="#" title="" rel="tab-1" class="active"><span>単　語</span></a></li>
				<li style="z-index:8;"><a href="#" title="" rel="tab-2"><span>対　話</span></a></li>
				<li style="z-index:7;"><a href="#" title="" rel="tab-3"><span>練　習</span></a></li>
				<li style="z-index:6;"><a href="#" title="" rel="tab-4"><span>文　法</span></a></li>
				<li style="z-index:5;"><a href="#" title="" rel="tab-5"><span>クラス</span></a></li>
			</ul>
		</div><!--End tabs-->
<div class="main03_3" ><a href="" style="z-index:10;"><img src="themes/default/img/Lesson_Finish.jpg" class="over" /></a> <a href=""><img src="themes/default/img/Lesson_Add.jpg" class="over" /></a></div>

		<div class="tab-panel">
			<div class="tab-content active" id="tab-1">
<table class="voc_tb01">
	<tr><td class="voc_td01" width=140px>中国語</td><td class="voc_td01" width=140px>ピンイン</td><td class="voc_td01" width=140px>日本語</td><td class="voc_td02" width=40px>聞く</td><td class="voc_td02" width=80px>単語登録</td><td class="voc_td02"></td></tr>
	<tr>
		<td class="voc_td04">你</td>
		<td class="voc_td04">ni</td>
		<td class="voc_td04">あなた</td>
		<td class="voc_td05"><a href="#"><img src="themes/default/img/icn_audio.gif" /></a></td>
		<td class="voc_td05"><a href="#"><img src="themes/default/img/icn_addcard.gif" /></a></td>
		<td class="voc_td05"></td>
	</tr>
	<tr>
		<td class="voc_td04">好久不见</td>
		<td class="voc_td04">haojiubujian</td>
		<td class="voc_td04">お久しぶりです</td>
		<td class="voc_td05"><a href="#"><img src="themes/default/img/icn_audio.gif" /></a></td>
		<td class="voc_td05"><a href="#"><img src="themes/default/img/icn_addcard.gif" /></a></td>
		<td class="voc_td05"></td>
	</tr>
</table>


			</div>
			<div class="tab-content" id="tab-2">
        <article class="dialogue">

<div class="exe_audio_container"><audio id="dia_audio_1" preload="auto" tabindex="0" controls="" type="audio/mpeg">
    <source type="audio/mp3" src="http://s3contents.chinesepod.com/1656/3532560445875c8ec035e0a5d75ed06ed7f81c58/mp3/64/chinesepod_5832_dialogue_50881_prototype_2276.mp3"></source>Sorry, your browser does not support HTML5 audio.</audio></div>
    
<ul id="dia_playlist"> 
    <button type="button" id="dia_play" >再生 ></button>
    <button type="button" id="dia_stop" >停止</button>
    <button type="button" id="dia_pinyin" >ピンインON</button>
    <button type="button" id="dia_trans" >日本語訳ON</button>
    <li class="active">      
        <a href="http://s3contents.chinesepod.com/1656/3532560445875c8ec035e0a5d75ed06ed7f81c58/mp3/64/chinesepod_5832_dialogue_50881_prototype_2276.mp3">
<p class="dia_pinyin">hi, hao jiu bu jian!</p>
<p class="dia_sentence"><span class="dia_speaker">Li Ming: </span>嗨，好久不见！</p>
<p class="dia_trans">（あ、久しぶり）</p>
</a> 
    </li>    
    <li><a href="http://s3contents.chinesepod.com/1656/3532560445875c8ec035e0a5d75ed06ed7f81c58/mp3/64/chinesepod_5832_dialogue_50882_prototype_921_15196.mp3">
        <p class="dia_pinyin">hi, hao jiu bu jian!</p>
        <p><span class="dia_speaker">山本先生: </span>好久不见！你怎么样？</p>     
        <p class="dia_trans">（久しぶり！最近どうですか？）</p>
        </a>
    </li>
    <li><a href="http://s3contents.chinesepod.com/1656/3532560445875c8ec035e0a5d75ed06ed7f81c58/mp3/64/chinesepod_5832_dialogue_50883_prototype_22530_14386_10261_2703.mp3">
        <p class="dia_pinyin">hi, hao jiu bu jian!</p>
        <p><span class="dia_speaker">Li Ming:</span>我很忙。你呢？</p>
         <p class="dia_trans">（とても忙しいです。あなたは？）</p>
        </a>
    </li>
    <li><a href="http://s3contents.chinesepod.com/1656/3532560445875c8ec035e0a5d75ed06ed7f81c58/mp3/64/chinesepod_5832_dialogue_50884_prototype_14547_24644_37555_13264.mp3">
         <p class="dia_pinyin">hi, hao jiu bu jian!</p>
        <p><span class="dia_speaker">山本先生: </span>我也很忙.</p>
           <p class="dia_trans">（私もとても忙しいですよ）</p>
        </a>
    </li>
</ul>


				</article>
        <div class="comments">コメント一覧(51)</div>
        <div class="comment_view">
          <div class="face"><img src="themes/default/img/face1.jpg" width="70" height="80"></div>
          <div class="comment_content">
          	<div class="">部長さん</div>
            <div class="">こんにちは、今回のレッスンについてどう思いますか？<br>少し簡単すぎるように思うのですが。</div>
          	<div class="">2013/06/10</div><br>
          </div>
				</div>        
        <div class="comment_input">
					<img src="themes/default/img/face2.jpg" width="70" height="80" />
          <span class="comment_right">
					<textarea name="" cols="70" rows="3" ></textarea><br><input name="" type="button" class="btn_comment" value="コメント">
          </span>
				</div>
                
      </div><!--End tab-2-->
      <div class="tab-content" id="tab-3">

<div id="exe_container">
<div id="exe_image_frame_container" class="exe_image_frame_container">
	<ul>
		<li class="exe_image_frame_wrapper">
			<div class="exe_image_frame" answer="The Boy" style="background-image: url('https://d2pur3iezf4d1j.cloudfront.net/images/af5dfab3daf7a1626450b4074a0b18b6')"></div>
			<p class="exe_image_frame_title">The Boy</p>
		</li>
	    
		<li class="exe_image_frame_wrapper">
			<div class="exe_image_frame" answer="the girl" style="background-image: url('https://d2pur3iezf4d1j.cloudfront.net/images/af5dfab3daf7a1626450b4074a0b18b6')"></div>
			<p class="exe_image_frame_title">the girl</p>
		</li>

	 	<li class="exe_image_frame_wrapper">
			<div class="exe_image_frame" answer="the man" style="background-image: url('https://d2pur3iezf4d1j.cloudfront.net/images/af5dfab3daf7a1626450b4074a0b18b6')"></div>
			<p class="exe_image_frame_title">the man</p>
		</li>

		<li class="exe_image_frame_wrapper">
			<div class="exe_image_frame" answer="the woman" style="background-image: url('https://d2pur3iezf4d1j.cloudfront.net/images/af5dfab3daf7a1626450b4074a0b18b6')"></div>
			<p class="exe_image_frame_title">the woman</p>
		</li>

	</ul>
</div>   
    <div id="exe_question_container">
        <div id="exe_display_question">The Boy</div>
    </div>
</div><!-- finish exe_contaier -->    
<br /><br />

</div>
      <div class="tab-content" id="tab-4"><img src="themes/default/img/tab4.png"></div>
      <div class="tab-content" id="tab-5"><img src="themes/default/img/tab5.png"></div>
      <div class="tab-content" id="tab-6"></div>
      <div class="tab-content" id="tab-7"></div>
		</div><!--End tab-panel-->
	</div><!--End main-->

  <div id="sidebar">
    <div class="sidebar01">
			<div class="menubar">
			   <ul id="menu">
			      <li><img src="themes/default/img/side_level00.jpg">
						</li>
			      <li><a href="#"><img src="themes/default/img/side_level01.jpg" class="over"></a>
							<ul class="sub">
								<li><a href="#">レッスン1　<img src="themes/default/img/progress01.gif">　10/20</a></li>
								<li><a href="#">レッスン2　<img src="themes/default/img/progress10.gif">　1/20</a></li>
							</ul>
						</li>
						<li><a href="#"><img src="themes/default/img/side_level02.jpg" class="over"></a>
			         <ul class="sub">
			            <li><a href="#">レッスン1　<img src="themes/default/img/progress00.gif">　0/20</a></li>
			            <li><a href="#">レッスン2　<img src="themes/default/img/progress00.gif">　0/20</a></li>
			         </ul>
			      </li>
			      <li><a href="#"><img src="themes/default/img/side_level03.jpg" class="over"></a>
			         <ul class="sub">
			            <li><a href="#">レッスン1　<img src="themes/default/img/progress00.gif">　0/20</a></a></li>
			            <li><a href="#">レッスン2　<img src="themes/default/img/progress00.gif">　0/20</a></a></li>
			         </ul>
			      </li>
			      <li><a href="#"><img src="themes/default/img/side_level04.jpg" class="over"></a>
			      </li>
			   </ul>
			</div>
    </div>
<br />
<br />

    <!--<div class="sidebar02">
      <span class="title01"></span>
			<div class="menubar">
			   <ul id="menu2">
			      <li><a href="#">入門クラスレッスン１を追加 (12/05)</a></li>
			      <li><a href="#">入門クラスレッスン２を追加 (12/04)</a></li>
			      <li><a href="#">入門クラスレッスン３を追加 (12/03)</a></li>
			      <li><a href="#">入門クラスレッスン４を追加 (12/02)</a></li>
			      <li><a href="#">入門クラスレッスン５を追加 (12/01)</a></li>
			   </ul>
			</div>
    </div>-->

    <div class="sidebar03">
			<img src="themes/default/img/L010102.jpg" />
			<p class="sidebar03-1"><span class="sidebar03-2">好久不见</span></p>
    </div><!--End sidebar03-->
		<table class="sidebar04">
			<tr><td>公開日　　　<span class="">2014.04.06</span></td></tr>
			<tr><td class="sidebar04-1">カテゴリー　<img src="themes/default/img/cate_business.png" /><img src="themes/default/img/cate_eat.png" /></td></tr>
			<tr><td class="sidebar04-2"><img src="themes/default/img/icn_sns.png" /></td></tr>
		</table>



  </div><!--End sidebar-->
</div><!--End body-->

<div id="footer">
<center>
	<div class="footer01">
	<a href="">個人情報保護方針</a>　　
	<a href="">お問合せ</a>　　
	<a href="">会社概要</a><br>
	Copyright © 2013 CO.,LTD. All rights Reserved
	</div>
</center>
</div>

<script type="text/javascript"  src="themes/default/js/lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="themes/default/js/live/dev.debug.js"></script>
<!-- <script type="text/javascript" src="themes/default/js/live/prod.min.js"></script> -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-a7238e7-7fc2-53ee-47bc-d0696acaf9bd"}); </script>
</body>